<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('节点可勾选')}`">{{ $t('节点可勾选') }}</t>
            <li>
                配置<span class="d-code">show-checkbox</span>可以启用节点勾选；
                在树数据<span class="d-code">data</span>的节点内配置
                <span class="s-code">disabled</span>为
                <span class="s-code">true</span>，即可使该节点不允许勾选
                （<span class="s-code">disabled</span>这个字段名取决于<span class="d-code">props</span>内对其的配置）
            </li>
            <li>
                配置<span class="d-code">selection</span>可以设置默认选中；该属性为节点数据组成的数组，或者为节点对应的
                <span class="d-code">node-key</span>组成的数组
            </li>
            <li>
                注意：若节点勾选未启用时，<span class="d-code">selection</span>的第一个元素对应的节点将会被高亮展示。
            </li>
        </template>
        <div style="margin-bottom: 10px;">
            <el-button @click="handleCheck">手动勾选节点</el-button>
            <el-button @click="handleClear">清空勾选</el-button>
            <el-button @click="handleChange">切换</el-button>
        </div>
        <sib-tree
            node-key="myid"
            :show-checkbox="showCheckbox"
            :props="props"
            :data="treeData"
            :selection="selection"
            style="height: 200px;">
        </sib-tree>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const selection = ref([111, 122]);
        const showCheckbox = ref(true);
        return {
            selection,
            showCheckbox,
            props: {
                children: 'mychildren',
                label: 'myname',
                disabled: 'mydisabled',
            },
            treeData: [
                {
                    myid: 1,
                    myname: 'IT研发部',
                    mychildren: [
                        {
                            myid: 11,
                            myname: '前端组',
                            mychildren: [
                                {
                                    myid: 111,
                                    myname: 'bearsee',
                                },
                                {
                                    myid: 112,
                                    myname: '摸鱼张三',
                                },
                                {
                                    myid: 113,
                                    myname: '带薪拉屎老王',
                                    mydisabled: true,
                                },
                            ],
                        },
                        {
                            myid: 12,
                            myname: '后端组',
                            mychildren: [
                                {
                                    myid: 121,
                                    myname: '三炮',
                                },
                                {
                                    myid: 122,
                                    myname: '飞天老李',
                                },
                            ],
                        },
                    ],
                },
            ],
            handleCheck() {
                selection.value = [112];
            },
            handleClear() {
                selection.value = [];
            },
            handleChange() {
                showCheckbox.value = !showCheckbox.value;
            },
            templateString: `<template>
    <div class="example-box">
        <div style="margin-bottom: 10px;">
            <el-button @click="handleCheck">手动勾选节点</el-button>
            <el-button @click="handleClear">清空勾选</el-button>
            <el-button @click="handleChange">切换</el-button>
        </div>
        <sib-tree
            node-key="myid"
            :show-checkbox="showCheckbox"
            :props="props"
            :data="treeData"
            :selection="selection"
            style="height: 200px;">
        </sib-tree>
    </div>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const selection = ref([111, 122]);
        const showCheckbox = ref(true);

        return {
            selection,
            showCheckbox,
            props: {
                children: 'mychildren',
                label: 'myname',
                disabled: 'mydisabled',
            },
            treeData: [
                {
                    myid: 1,
                    myname: 'IT研发部',
                    mychildren: [
                        {
                            myid: 11,
                            myname: '前端组',
                            mychildren: [
                                {
                                    myid: 111,
                                    myname: 'bearsee',
                                },
                                {
                                    myid: 112,
                                    myname: '摸鱼张三',
                                },
                                {
                                    myid: 113,
                                    myname: '带薪拉屎老王',
                                    mydisabled: true,
                                },
                            ],
                        },
                        {
                            myid: 12,
                            myname: '后端组',
                            mychildren: [
                                {
                                    myid: 121,
                                    myname: '三炮',
                                },
                                {
                                    myid: 122,
                                    myname: '飞天老李',
                                },
                            ],
                        },
                    ],
                },
            ],
            handleCheck() {
                selection.value = [112];
            },
            handleClear() {
                selection.value = [];
            },
            handleChange() {
                showCheckbox.value = !showCheckbox.value;
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
